import React from 'react'
import '../../style/kuangjia.css'
import '../../style/main.css'
import '../../style/highlight.css'
import '../../style/charts.css'

const Charts = () => {
  const charts = [
    {
      src: "../musicImages/highlight1.png",
      count: "1863.4万",
      name: "飙升",
      songs: ["We Higher - 十个勤奋", "GBGN - CHANY", "我知道 - BY2"]
    },
    {
      src: "../musicImages/highlight1.png",
      count: "1920.0万",
      name: "热歌",
      songs: ["APT. - ROSÉ", "爱错 - 王力宏", "孤独患者 - 陈奕迅"]
    },
    {
      src: "../musicImages/highlight1.png",
      count: "28.2万",
      name: "新歌",
      songs: ["APT. - ROSÉ", "匿名的好友 - en", "镜花水月 - 张靓颖"]
    },
    {
      src: "../musicImages/highlight1.png",
      count: "795.3万",
      name: "流行指数",
      songs: ["匿名的好友 - en", "镜花水月 - 张靓颖", "Memories - Maroon 5"]
    },
    {
      src: "../musicImages/highlight1.png",
      count: "44.1万",
      name: "音乐原创",
      songs: ["安全第一 - 李大奔BENZO", "再见 - Matt昌彦良", "Work It Out - 刘忱"]
    },
    {
      src: "../musicImages/highlight1.png",
      count: "305.0万",
      name: "听歌识曲",
      songs: ["APT. - ROSÉ", "Memories - Maroon 5", "青丝 - 时光胶囊"]
    },
    {
      src: "../musicImages/highlight1.png",
      count: "145.0万",
      name: "MV",
      songs: ["aespa《Whiplash》MV", "APT.- ROSÉ", "ITZY 'Imaginary Friend' MV"]
    },
  ];
  const data = {
    region: [
      { src: "../images/avatar.jpg", count: "2149.9万", desc: "欧美 | 欢快氛围" },
      { src: "../images/avatar.jpg", count: "1456.2万", desc: "亚洲 | 浪漫情怀" },
      { src: "../images/avatar.jpg", count: "2149.9万", desc: "欧美 | 欢快氛围" },
      { src: "../images/avatar.jpg", count: "1456.2万", desc: "亚洲 | 浪漫情怀" },
      { src: "../images/avatar.jpg", count: "2149.9万", desc: "欧美 | 欢快氛围" },
      { src: "../images/avatar.jpg", count: "1456.2万", desc: "亚洲 | 浪漫情怀" },
      { src: "../images/avatar.jpg", count: "2149.9万", desc: "欧美 | 欢快氛围" },
      { src: "../images/avatar.jpg", count: "1456.2万", desc: "亚洲 | 浪漫情怀" }
    ],
    special: [
      { src: "../images/enSong.webp", count: "3254.8万", desc: "说唱榜" },
      { src: "../images/enSong.webp", count: "2198.7万", desc: "电音榜" },
      { src: "../images/enSong.webp", count: "3254.8万", desc: "游戏音乐榜" },
      { src: "../images/enSong.webp", count: "2198.7万", desc: "动漫音乐榜" },
      { src: "../images/enSong.webp", count: "3254.8万", desc: "影视金曲榜" },
      { src: "../images/enSong.webp", count: "2198.7万", desc: "综艺新歌榜" },
      { src: "../images/enSong.webp", count: "2198.7万", desc: "国风热歌榜" },
      { src: "../images/enSong.webp", count: "2198.7万", desc: "全民K歌榜" },
      { src: "../images/enSong.webp", count: "2198.7万", desc: "抖音热歌榜" },
      { src: "../images/enSong.webp", count: "2198.7万", desc: "DJ舞曲榜" },
      { src: "../images/enSong.webp", count: "2198.7万", desc: "网络歌曲榜" },
    ],
    wholeWorld: [
      { src: "../images/happy.jpg", count: "4123.4万", desc: "全球 | 热门金曲" },
      { src: "../images/happy.jpg", count: "3657.9万", desc: "全球 | 最新单曲" },
      { src: "../images/happy.jpg", count: "4123.4万", desc: "全球 | 热门金曲" },
      { src: "../images/happy.jpg", count: "3657.9万", desc: "全球 | 最新单曲" }
    ]
  };
  return (
    <div className="playhallpage">
      <ul className='bangdan'>
        {charts.map((item, index) => (
          <li className="card4">
            <button className='listens'><i class="ri-customer-service-fill">{item.count}</i></button>
            <div className='mingzi2'>{item.name}</div>
            <div className="threelis">
              <div className="titl3">{item.name}榜</div>
              <ul className='threeli'>
                <li>1 {item.songs[0]}</li>
                <li>2 {item.songs[1]}</li>
                <li>3 {item.songs[2]}</li>
              </ul>
            </div>
          </li>
        ))}
      </ul>
      <p className="titl2">地区榜</p>
      <ul className="bangdan2">
        {data.region.map((item, index) => (
          <li className='mingzi3'>
            <button className='listens2'><i class="ri-customer-service-fill">{item.count}</i></button>
            {item.desc}
          </li>
        ))}
      </ul>
      <p className="titl2">特色榜</p>
      <ul className="bangdan2">
        {data.special.map((item, index) => (
          <li className='mingzi3' style={{ background: 'linear-gradient(to right, #33343a, #4a333b)' }}>            <button className='listens2'><i class="ri-customer-service-fill">{item.count}</i></button>
            {item.desc}
          </li>
        ))}
      </ul>
      <p className="titl2">全球榜</p>
      <ul className="bangdan2" style={{ height: '240px' }}>
        {data.wholeWorld.map((item, index) => (
          <li className='mingzi3'>
            <button className='listens2'><i class="ri-customer-service-fill">{item.count}</i></button>
            {item.desc}
          </li>
        ))}
      </ul>
    </div>
  )
}

export default Charts